<template>
  <div>
    <header>
      <h1 class="w">
        <div class="login_logo"><img src="/img/wlh/logo.png" alt="" /></div>
      </h1>
    </header>
    <div class="login w">
      <div class="download_left">
        <img
          src="http://qnm.hunliji.com/o_1abi34nlkj491upu133a1l86h051a.jpg"
          alt=""
        />
      </div>
      <div class="login_box">
        <ul>
          <li class="denglu w300">
            <span>登录</span>
            <router-link to="/register">我还没有账号，点击注册</router-link>
          </li>
          <li class="err w300" :class="{ displayNone: isErr }">
            <span></span>{{ errMsg }}
          </li>
          <li class="phone_num w300">
            <input
              type="text"
              placeholder="手机号"
              maxlength="11"
              v-model="phone"
              @blur="testPhone"
            />
            <span :class="{ displayNone: isPhoneCorrect }"></span>
          </li>
          <li class="password w300">
            <input
              type="password"
              placeholder="密码"
              maxlength="16"
              v-model="password"
              @blur="testPwd"
            />
            <span :class="{ displayNone: isPwdCorrect }"></span>
          </li>
          <li class="codema w300">
            <input
              type="text"
              placeholder="请输入图片验证码"
              v-model="user_svg"
            />
            <div
              class="code_pic"
              id="code_ma"
              v-html="svg_pic"
              @click="updateCode"
              title="点击切换新验证码"
            ></div>
          </li>
          <li class="btn w300">
            <input type="button" value="登 录" id="dologin" @click="login" />
          </li>
          <li class="txt w300">
            *登录即表示同意<a href="#">《婚礼纪用户协议》</a>
          </li>
          <li class="share w300">
            <div>第三方登录：</div>
            <div class="wqb"><i></i> 微信</div>
            <div class="wqb"><i></i> 微信</div>
            <div class="wqb"><i></i> 微信</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 挂载页脚组件 -->
    <my-footer></my-footer>
  </div>
</template>
<style scoped>
@import url(/css/login.css);
</style>
<script>
export default {
  data() {
    return {
      svg_pic: "",
      svg_code: "",
      user_svg: "",
      isErr: true,
      errMsg: "您输入的账号/密码/验证码有错误哦！",
      phone: "",
      password: "",
      isPhoneCorrect: true,
      isPwdCorrect: true,
    };
  },
  methods: {
    // 1.封装请求验证码的函数
    updateCode() {
      // 打开页面就自动请求验证码模块写入页面
      this.axios.get("/svg").then((result) => {
        // 请求得到的svg图片和验证码
        this.svg_pic = result.data.data;
        this.svg_code = result.data.text;
        console.log(this.svg_code);
      });
    },
    // 2.封装一个验证手机号格式的函数
    testPhone() {
      // 创建手机号的正则表达式
      var phone_reg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
      var result = phone_reg.test(this.phone);
      if (result) {
        console.log("手机号格式正确");
        // 当手机号格式正确时显示对钩提示用户输入正确格式
        this.isPhoneCorrect = false;
        this.isErr = true;
      } else {
        // 手机号格式错误时不仅要去掉displayNone类还要改变其内容和字体颜色
        this.isErr = false;
        this.isPhoneCorrect = true;
        // 去掉其displayNone的类名让其显示出来
        console.log("手机号格式错误");
        this.errMsg = "请输入一个格式正确的手机号";
      }
    },
    // 3.封装验证密码格式的函数
    testPwd() {
      // 创建密码的正则表达式
      var pwd_reg = /^[0-9]{6}$/;
      var result = pwd_reg.test(this.password);
      if (result) {
        this.isPwdCorrect = false;
        this.isErr = true;
      } else {
        this.isErr = false;
        this.isPwdCorrect = true;
        this.errMsg = "请输入一个格式正确的密码";
      }
    },
    // 4.用户点击登录
    login() {
      // 判断所有的数据格式是否正确，正确了再发请求
      if (this.isPhoneCorrect || this.isPwdCorrect) {
        this.errMsg = "请您先填写正确格式的信息后进行登录!";
      }
      // 判断验证码输入是否正确
      else if (this.user_svg == this.svg_code) {
        // 在验证码格式正确的情况下进行登录请求
        this.axios
          .get("/user/login", {
            params: {
              phone: this.phone,
              upwd: this.password,
            },
          })
          .then((result) => {
            if (result.data.code == 200) {
              // 改变Vuex商店里面的数据进行网站用户状态管理
              // 错误写法：
              // this.$store.state.user_phone = this.phone;
              // this.$store.state.is_login = 1;
              // 正确写法:--调用mutations中的函数修改，我们是无法直接修改的
              this.$store.commit("updateUserInfo", this.phone, 1);
              // 注意为了实现刷新页面不需要用户重新登录的bug发生我们需要使用H5的新特性 sessionStorage在本地缓存用户信息
              let ss = window.sessionStorage;
              ss.phoneNumber = this.phone;
              ss.is_login = 1;
              // 登陆成功时
              // alert(`婚礼纪欢迎手机号为${this.phone}的用户！`);
              // 登录成功后跳转到首页
              // window.open("http://hunliji.applinzi.com", "_self");
              window.open("http://localhost:8080", "_self");
            } else {
              // 登陆失败时
              alert("服务器端错误!登录失败!");
            }
          });
      } else {
        this.isErr = false;
        this.errMsg = "验证码错误";
      }
    },
  },
  mounted() {
    this.updateCode();
  },
};
</script>